<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        #header{
            text-align: center;
        }
        #header h5{
            display: inline-block;
            color: #FFF;
            line-height: 48px;
            width: 100%;
            position: absolute;
            left: 0;
        }
        .btn_box{
            width: 52px;
            height: 48px;
            position: relative;
        }
        .btn_box img{
            width: 23px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
        .btn_box.pull-left{
            background: url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
            position: relative;
            z-index: 1;
        }
        .btn_box.pull-left:active,.btn_box.pull-left.tap-active{
            background: #7F0000 url(../../res/img/webview_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }
        .btn_box.pull-right{
            background: url(../../res/img/webview_dividing.png) left center no-repeat;
            background-size: 1px 100%;
            position: relative;
            z-index: 1;
        }
        .btn_box.pull-right:active,.btn_box.pull-right.tap-active{
            background: #7F0000 url(../../res/img/webview_dividing.png) left center no-repeat;
            background-size: 1px 100%;
        }
        img{
            position: absolute;
            width: 30%;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="btn_box pull-left" tapmode="tap-active" onclick="api.closeWin();">
                <img src="../../res/img/tmall_btn_bar_back.png" alt="">
            </div>
            <h5>语音搜索</h5>
        </div>
        <div id="main"> 
            <p style="margin-bottom:2em;">你说的是：</p>
            <p id="recordStr">
            </p>
            <img src="../../res/img/voiceinput_btnbg_normal.png" alt="" id="img">
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    
    apiready = function(){
        var header = $api.byId('header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var name = api.pageParam.name;
        var title = api.pageParam.title;
        // $api.dom('#header h5').innerHTML = title;
        var url = './'+name+'-con.html';
        function openSpeechRecognizer(){
            document.getElementById("recordStr").innerHTML = '正在录音';
            var obj = api.require('speechRecognizer');
            obj.record({
               vadbos: 3000,
               vadeos: 3000,
               rate: 16000,
               asrptt: 1
            },function(ret,err){
               if(ret.status){
                  document.getElementById("recordStr").innerHTML = ret.wordStr;
                  document.getElementById("img").style.display = 'none';
               }
             });
            
            // obj.showRecordHUD();

        };
        setTimeout(function(){

            openSpeechRecognizer();
        },1000);
        
        function stopSpeechRecognizer(){
            var obj = api.require('speechRecognizer');
            obj.stopRecord();
            // 隐藏录音标识.
            // obj.hideRecordHUD();
        };  
    }
</script>
</html>